<template>
  <div class="h100 p-10">
    <el-card class="h100 main-card" body-class="h100 flex-v">
      <el-tabs v-model="activeTab" @tab-change="tabChange">
        <el-tab-pane label="生成PPT" name="creator"> </el-tab-pane>
        <el-tab-pane label="我的列表" name="dashboard"> </el-tab-pane>
      </el-tabs>
      <div id="container" class="flex-1"></div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { CreatorType, DocmeeUI } from "@docmee/sdk-ui"; // 导入相关依赖
import { useUserStore } from "@/store/user";
import { PptApi } from "@/api/ai/ppt";
// dashboard
const activeTab: any = ref("creator");
const userStore = useUserStore();
const pptToken = ref("");
const pptCss = computed(() => {
  const commonCss = `
  .drawerPanelControl .transition-all .btn-group .btn:not(.btn-active){display: none}
  `;
  const cssMap = {
    creator: `
    .editorHeader #exitToHomeButton button.hdd-btn{display: none}
    .rounded-box .rounded-lg .btn:not(.btn-active){display: none}
    `,
    dashboard: `
    .py-4 .animate-fade-right .mb-5 .flex-wrap button.btn{display: none}
    .py-4{padding-left: 1rem}
    `,
  };
  return commonCss + cssMap[activeTab.value];
});
let docmee: any = null;
const tabChange = (v) => {
  console.log("v", v);
  initPPT();
};
const initPPT = () => {
  docmee && docmee?.destroy();
  docmee = new DocmeeUI({
    container: "container",

    // 进入页面，'dashboard'表示文档列表页，'creator'生成 ppt 页面, 'customTemplate'表示进入自定义模版页面，'editor'表示编辑页面（pptId 必须同时传递）
    page: activeTab.value,
    creatorVersion: "v2", // 创建PPT 版本选择：v1 - 旧版 ; v2 - 新版
    // token: "ak_6_bI2W55EEEp3v0xP3",
    token: pptToken.value,
    mode: "light",
    lang: "zh",
    hidePdfWatermark: true,
    background: userStore.getTheme == "dark" ? "#12111d" : "#fff",
    css: pptCss.value,
    // 从外部传入主题
    // creatorData: {
    //   type: CreatorType.AI_GEN,
    //   subject: "Ai行业未来10年的发展预测",
    // },
    onMessage(message) {
      console.log("监听事件", message);
      if (message.type === "invalid-token") {
        // 在token失效时触发
        console.log("token 认证错误");
        // 更换新的 token
        // let newToken = createApiToken()
        // docmee.updateToken(newToken)
      } else if (message.type === "beforeGenerate") {
        const { subtype, fields } = message.data;
        // console.log('subtype, fields', subtype, fields)
        return checkPower();
        // if (subtype === "outline") {
        //   // 生成大纲前触发
        //   console.log("即将生成ppt大纲", fields);
        //   return true;
        // } else if (subtype === "ppt") {
        //   // 生成PPT前触发
        //   console.log("即将生成ppt", fields);
        //   docmee.sendMessage({
        //     type: "success",
        //     content: "继续生成PPT",
        //   });
        //   return checkPower();
        // }
      } else if (message.type === "beforeCreateCustomTemplate") {
        const { file, totalPptCount } = message.data;
        // 是否允许用户继续制作PPT
        console.log("用户自定义完整模版，PPT文件：", file.name);
        if (totalPptCount < 2) {
          console.log("用户积分不足，不允许制作自定义完整模版");
          return false;
        }
        return true;
      } else if (message.type == "pageChange") {
      } else if (message.type == "error") {
        if (message.data.code == 88) {
          // 创建token传了limit参数可以限制使用次数
          console.log("您的次数已用完");
        } else {
          console.log("发生错误：" + message.data.message);
        }
      }
    },
  });
  // 绑定事件回调
  // docmee.on("mounted", (msg) => {
  //   console.log(msg);
  // });

  // docmee.on("beforeGenerate", (msg) => {
  //   console.log(msg);
  //   // return checkPower();
  //   const hasPower = checkPower(); // 同步检查函数
  //   if (hasPower) {
  //     docmee.sendMessage({
  //       type: "success",
  //       content: "继续生成PPT",
  //     });
  //   }
  //   return hasPower;
  // });

  // docmee.on("pageChange", (msg) => {
  //   console.log(msg);
  // });
};
onMounted(async () => {
  await getPPtToken();
  // 初始化UI
  initPPT();
});
const getPPtToken = async () => {
  let res = await PptApi.createApiToken();
  pptToken.value = res.token;
};
const checkPower = async () => {
  try {
    const res = await PptApi.checkPower();
    console.log("权限验证通过", res);
    return true; // 验证通过，继续生成
  } catch (err) {
    console.log("权限验证失败", err);
    return false; // 验证失败，阻止生成
  }
};
watch(
  () => userStore.getTheme,
  () => {
    initPPT();
  }
);
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  // height: calc(100% - 44px);
  margin: 0;
  padding: 0;
  border-radius: 12px;
  // box-shadow: 0 0 12px rgba(120, 120, 120, 0.3);
  overflow: hidden;
  background: linear-gradient(-1、57deg, #f57bb0, #867dea);
  color: white;
}
.main-card {
  // max-width: 1200px;
  margin: 0 auto;
  margin-left: 10px;
  padding: 0 10px 20px 10px;
  background: var(--img-group-bg);
  border-radius: 10px;
  overflow: auto;
  border: none;
}
</style>
